<template>
  <div class="header flexS">
    <SvgIcon name="leftArrow" :size="iconSize" @click="goBack" />
    <div class="search">
      <input
        v-model="key"
        focus
        :maxlength="maxlength"
        :placeholder="placeholder"
        type="text"
        placeholder-class="placeholder"
        @input="inputHandle"
        @focus="focusHandle"
      />
      <span class="flexC" @click="search">搜索</span>
    </div>
  </div>
  <!-- 占位 -->
  <div class="slot"></div>
</template>

<script lang="ts" setup>
  import { ref, defineEmits } from 'vue'
  import { useRouter } from 'vue-router'
  import SvgIcon from '@comp/SvgIcon/index.vue'
  const iconSize = ref<number>(23)
  const maxlength = ref<number>(40) //输入框最大长度
  const placeholder = ref<string>('请输入搜索内容...')
  const key = ref<string>('') //搜索关键字
  // 监听输入框变化
  const inputHandle = (e: any) => {
    key.value = e.target.value
    console.log(key, 'eee')
  }
  // 获取焦点事件
  const focusHandle = () => {
    console.log('focus')
  }
  // 创建路由实例
  const router = useRouter()
  const goBack = () => router.back()
  // 获取 emit
  const emit = defineEmits(['searchHandle', 'chang-name'])
  // 调用 emit
  const search = () => {
    emit('searchHandle', key.value)
  }
</script>
<style lang="scss" scoped>
  .header {
    height: $nav-height;
    background-color: $search-bgColor;
    padding: 0 10px;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;

    .search {
      flex: 1;
      height: 80%;
      padding-right: 5px;
      display: flex;
      align-items: center;
      background-color: #fff;
      border-radius: 10px;

      > input {
        flex: 1;
        border-radius: 10px;
        padding-left: 10px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        font-size: 14px;
        border: none;
      }

      > span {
        width: 55px;
        font-size: 15px;
        border-left: 1px solid #000;
      }
    }
  }

  .slot {
    height: $nav-height;
  }
</style>
